<template>
    <div class="logincontainer">
           <el-form class="loginform" :model="loginModel" ref="form" :rules="rules"  :inline="false" size="large">
            <el-form-item>
                <div class="logintitle">系统登录</div>
            </el-form-item>
            <el-form-item   prop="username">
              <el-input placeholder="请输入账号" v-model="loginModel.username"></el-input>
            </el-form-item>
            <el-form-item  prop="password">
              <el-input placeholder="请输入密码" v-model="loginModel.password"></el-input>
            </el-form-item>
            <el-form-item label="" size="normal" prop="code">
                <el-row :gutter="20">
                    <el-col :span="16" :offset="0"  >
                        <el-input   placeholder="请输入验证码" v-model="loginModel.code"></el-input>
                    </el-col>
                    <el-col :span="8" :offset="0">
                        <img :src="imgsrc" class="img" @click="getImg">
                    </el-col>
                </el-row>
            </el-form-item>
            <el-row :gutter="20" >
                <el-col :span="12" :offset="0">
                    <el-button class="mybtn" type="primary" @click="commit">登录</el-button>
                </el-col>
                <el-col :span="12" :offset="0">
                    <el-button class="mybtn" @click="resetBtn">重置</el-button>
                </el-col>
            </el-row>
           </el-form>
           
    </div>
</template>

<script setup lang="ts">
import { ElMessage, type FormInstance } from 'element-plus';
import { ref } from 'vue';
import { reactive } from 'vue';
import { getImgApi,loginApi } from '../../api/user';
import { onMounted } from 'vue';
import { userStore } from '../../store/user';
import { usepasswordStore } from '../../store/password';
import { useRouter } from 'vue-router';
const router = useRouter()
const store = userStore()
const passwordStore = usepasswordStore()
const form = ref<FormInstance>()
const loginModel = reactive({
    username:'',
    password:'',
    code:'',
    image:'',
    type:''
})
const rules = reactive({
    username:[
        {
            required:true,
            trigger:["blur","change"],
            message:"请输入账号"
        }
    ],
    password:[
        {
            required:true,
            trigger:["blur","change"],
            message:"请输入密码"
        }
    ],
    code:[
        {
            required:true,
            trigger:["blur","change"],
            message:"请输入验证码"
        }
    ]
})
//获取验证码
const imgsrc = ref('')
const getImg = async() =>{
    let res = await getImgApi()
    if(res && res.code == 200){
        ElMessage.success('获取验证码成功')
        imgsrc.value = res.data
    }
}
const commit = () =>{
   form.value?.validate(async(valid)=>{
    if(valid){
        let res = await loginApi(loginModel)
        if(res && res.code == 200){
            console.log(res)
            store.setUserId(res.data.userId)
            store.setNickName(res.data.nickName)
            store.setToken(res.data.token)
            store.setImage(res.data.image)
            store.setType(res.data.type)
            console.log("图片数据res.data"+res.data.image)
            passwordStore.setUserId(res.data.userId)
            passwordStore.setPassword(loginModel.password)
            router.push('/dashboard')
            ElMessage.success('登录成功')
        }
    }
   })
}
const resetBtn = () =>{
    form.value?.resetFields()
}
onMounted(()=>{
    getImg()
})   
</script>

<style lang="scss" scoped>
.logincontainer{
    height: 100%;
    background-color: #fff;
    background-image: url('@/assets/login.avif');
    background-size: cover;  // 背景覆盖容器关键属性
    background-position: center; 
    display: flex;
    justify-content:center;
    align-items: center;

    .loginform{
        height: 320px;
        width: 450px;
        padding: 20px 35px;
        border-radius: 10px;
        background-color: #fff;

        .logintitle{
            display: flex;
            justify-content: center;
            color: #606266;
            width: 100%;
            font-size: 24px;
            font-weight: 600px;
        }
        img{
            height: 100%;
            width: 100%;
            cursor: pointer;
            left: 25px;
            display: block;
        }
        
        .mybtn{
            width: 100%;
        }
    }
}

</style>